<template>
	<view class="login_page">
		<view class="header">
			<image src="https://static.tianwandailian.cn/static/server/newimage/back_icon.png" mode="" class="back-img"
				@click="goBack"></image>
			<view class="title-box">
				<view class="title">登录密码</view>
			</view>
		</view>
		<view class="main">
			<view class="login-box">
				<view class="form">
					<uv-form labelPosition="top" :model="form" ref="formRef">
						<view v-if="steps === 0">
							<uv-form-item prop="phone">
								<view class="ipt-box">
									{{ phoneNumberMask(form.phone) }}
									<!-- <uv-input type="number" placeholder="请输入手机号" prefixIcon="phone" border="none"
										v-model="form.phone" clearable></uv-input> -->
								</view>
							</uv-form-item>
							<uv-form-item prop="code">
								<view class="ipt-box">
									<uv-input type="number" placeholder="请输入验证码" border="none" v-model="form.code"
										placeholder-class="placeholderStyle" :maxlength="6">
										<template v-slot:suffix>
											<uv-code ref="uCodeRef" @change="codeChange" seconds="60"></uv-code>
											<view @click="getCode" style="color: #6E68E9;font-size: 28rpx;">{{codeTips}}</view>
										</template>
									</uv-input>
								</view>
							</uv-form-item>
							<uv-button type="primary" text="下一步" :disabled="!form.phone" @click="submit(1)"
								customTextStyle="font-size: 28rpx;color:#fff"
								customStyle="margin-top:132rpx;width:600rpx;border-radius: 40rpx;height: 80rpx;"></uv-button>
						</view>
						<view v-else>
							<uv-form-item prop="pwd">
								<view class="ipt-box">
									<uv-input placeholder="请输入密码" password placeholder-class="placeholderStyle" border="none"
										v-model="form.pwd" clearable></uv-input>
								</view>
							</uv-form-item>
							<uv-form-item prop="affirmPwd">
								<view class="ipt-box">
									<uv-input placeholder="请再次输入密码" placeholder-class="placeholderStyle" border="none" password
										v-model="form.affirmPwd" clearable></uv-input>
								</view>
							</uv-form-item>
							<uv-button type="primary" text="确认" @click="submit(2)" customTextStyle="font-size: 28rpx;color:#fff"
								customStyle="margin-top:132rpx;width:600rpx;border-radius: 40rpx;height: 80rpx;"></uv-button>
						</view>
					</uv-form>
				</view>
			</view>
		</view>
		<uv-modal ref="modalRef" title="密码修改成功" align="center" content='密码修改成功,请前往登录.' confirmText="确定"
			confirmColor="#6E68E9" @confirm="toLogin"></uv-modal>
	</view>
</template>
<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	import {
		checkStr,
		phoneNumberMask
	} from '@/utils';
	import {
		CheckForgetCode,
		CheckSmsCode,
		Register,
		ResetPwd,
		SendSmsCode
	} from '@/api/modules/system';
	import Md5 from 'js-md5'
	import useStore from '@/stores';

	const {
		globalStore
	} = useStore()

	onShow(() => {
		form.phone = globalStore.userInfo.phone
	})

	const form = reactive({
		phone: "",
		pwd: "",
		code: "",
		affirmPwd: ""
	})

	const formRef = ref()

	const codeTips = ref("")
	//	倒计时
	function codeChange(text) {
		codeTips.value = text;
	}
	// 	获取验证码
	const uCodeRef = ref()

	function getCode() {
		if (!form.phone || !checkStr(form.phone, 'mobile')) {
			uni.$uv.toast('请输入正确的手机号');
			return
		}

		if (uCodeRef.value.canGetCode) {
			uni.showLoading({
				title: '正在获取验证码'
			})
			SendSmsCode({
				phone: form.phone,
				isRegister: 2
			}).then(res => {
				uni.hideLoading();
				uni.$uv.toast('验证码已发送');
				uCodeRef.value.start();
			})
		}
	}

	// const selectRadio = ref(true)
	const steps = ref(0)
	const modalRef = ref()

	function submit(type) {
		if (type === 1) {
			if (!form.phone || !checkStr(form.phone, 'mobile')) {
				uni.$uv.toast('请输入正确的手机号');
				return
			}

			if (!form.code || form.code.length !== 6) {
				uni.$uv.toast('请输入6位数短信验证码');
				return
			}


			steps.value = type
		} else {
			if (form.pwd !== form.affirmPwd) {
				uni.$uv.toast('两次密码不一致，请重新输入密码')
				return
			}
			if (form.pwd.length < 6) {
				uni.$uv.toast('密码长度最少为6位')
				return
			}
			if (form.affirmPwd.length < 6) {
				uni.$uv.toast('密码长度最少为6位')
				return
			}

			if (checkStr(form.affirmPwd, 'chinese')) {
				uni.$uv.toast('密码不支持汉字，请重新输入')
				return
			}

			if (!form.pwd || !form.affirmPwd) {
				uni.$uv.toast('账号或密码不能为空!')
				return
			}

			const MD5_PWD = Md5(form.pwd)
			ResetPwd({
				phone: form.phone,
				newPassWord: MD5_PWD,
				repeatPassword: MD5_PWD,
				smsCode: form.code
			}).then(res => {
				modalRef.value.open()
			})
		}
	}

	function toLogin() {
		globalStore.logout()
	}

	function goBack() {
		uni.navigateBack()
	}
</script>
<script>

</script>
<style scoped lang="scss">
	.login_page {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		background-image: url('https://static.tianwandailian.cn/static/server/newimage/order_bg.png');
		background-repeat: no-repeat;
		position: relative;

		.header {
			height: 352rpx;
			width: 100%;
			position: relative;

			.back-img {
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				top: 95rpx;
				left: 32rpx;
			}

			.title-box {
				margin: 206rpx 76rpx 0;


				.title {
					color: #222;
					font-size: 64rpx;
					font-weight: 600;
				}


			}

			.goback {
				position: absolute;
				left: 30rpx;
				top: 100rpx;
				cursor: pointer;
			}
		}

		.main {
			width: calc(100vw - 152rpx);
			padding: 0 76rpx;
			flex: 1;
			display: flex;

			.login-box {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;

				.oauth {
					text-align: center;
					margin-top: 242rpx;

					.number {
						font-size: 60rpx;
						font-weight: 700;
						color: #222
					}

					.tip {
						margin-top: 30rpx;
						font-size: 28rpx;
						color: #888
					}

					.btn-box {
						margin-top: 120rpx;
					}
				}

				.form {
					margin-top: 60rpx;

					.uv-form {
						width: 100%;

						.ipt-box {
							background: #F5F5F5;
							height: 96rpx;
							border-radius: 16rpx;
							width: calc(100% - 60rpx);
							display: flex;
							align-items: center;
							padding: 0 30rpx;
						}
					}
				}

				// .other-box {
				// 	width: 100%;
				// 	margin-bottom: 140rpx;
				// 	display: flex;
				// 	align-items: center;
				// 	justify-content: center;
				// 	font-size: 28rpx;
				// 	color: #222;

				// 	.select {
				// 		height: 35rpx;
				// 		width: 35rpx;
				// 		border: 1rpx solid #2979ff;
				// 		background: #2979ff;
				// 		border-radius: 50%;
				// 		display: flex;
				// 		align-items: center;
				// 		justify-content: center;
				// 	}

				// 	.unselect {
				// 		border: 1rpx solid #888;
				// 		background: #fff;
				// 	}
				// }
			}
		}
	}
</style>